<template>
    <div class="cash-list-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">提现明细</span>
            </template>
        </van-nav-bar>

        <img class="defaultpage" src="../../assets/defaultpage/getcash-default-page.png" v-if="result.length==0" alt="">
        <div class="class-template" v-for="(item,index) in result">
            <van-cell-group>
                <van-cell>
                    <template #title>
                        <span style="color:#333;font-size:15px;">{{item.bank_name}}（{{item.bank_card.substring(item.bank_card.length-4)}}）</span>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title> 
                        <span style="font-family: 'DINPro Medium';font-size:12px;vertical-align: -webkit-baseline-middle;">{{item.create_time | formateDate}}</span>
                    </template>
                    <template #default>
                        <span style="font-family: 'DINPro-Bold';color:#333;font-size:15px;">￥ 
                            <span style="font-size:24px;vertical-align: text-bottom;">{{item.money}}</span></span>
                    </template>
                </van-cell>
            </van-cell-group>
            <van-divider :style="{ color: '#efefef' ,margin:'10px auto'}"/>
            <p @click="showitem(index)"><span>提现审核</span><img :src="show?sc1:sc2" alt=""></p>
            <div class="list-detail" v-if="item.showpage">
                <van-cell-group>
                    <van-cell>
                        <template #title>
                            <span style="color:#333;">提现状态</span>
                        </template>
                        <template #default>
                            <!-- 状态：-2删除作废-1审核失败0申请中1审核通过2付款成功3付款失败 -->
                            <span style="color:#333;" v-if="item.status==-2">删除作废</span>
                            <span style="color:#333;" v-if="item.status==-1">审核失败</span>
                            <span style="color:#333;" v-if="item.status==0">申请中</span>
                            <span style="color:#333;" v-if="item.status==1">审核通过</span>
                            <span style="color:#333;" v-if="item.status==2">付款成功</span>
                            <span style="color:#333;" v-if="item.status==3">付款失败</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现时间">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">{{item.create_time | formateDate}}</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现单号">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">{{item.id}}</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现银行" :value="item.bank_name"/>
                    <van-cell title="银行账户">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">{{item.bank_card}}</span>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <span style="color:#333;">服务费</span>
                        </template>
                        <template #default>
                            <span style="color:#333;">- ￥ {{item.taxfee}}</span>
                        </template>
                    </van-cell>
                    <van-cell title="到账金额">
                        <template #default>
                            <span style="color:#333;">￥ {{Number(item.money)-Number(item.taxfee)}}</span>
                        </template>
                    </van-cell>
                    <van-cell title="到账时间">
                    </van-cell>
                </van-cell-group>
            </div>
        </div>


        <!-- <div class="class-template">
            <van-cell-group>
                <van-cell>
                    <template #title>
                        <span style="color:#333;font-size:15px;">招商银行（2234）</span>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title> 
                        <span style="font-family: 'DINPro Medium';font-size:12px;vertical-align: -webkit-baseline-middle;">2020-06-30 20:30:30</span>
                    </template>
                    <template #default>
                        <span style="font-family: 'DINPro-Bold';color:#333;font-size:15px;">￥ 
                            <span style="font-size:24px;vertical-align: text-bottom;">66.49</span></span>
                    </template>
                </van-cell>
            </van-cell-group>
            <van-divider :style="{ color: '#efefef' ,margin:'10px auto'}"/>
            <p><span>提现审核</span><img :src="show?sc1:sc2" alt=""></p>
            <div class="list-detail" v-if="false">
                <van-cell-group>
                    <van-cell>
                        <template #title>
                            <span style="color:#333;">提现状态</span>
                        </template>
                        <template #default>
                            <span style="color:#333;">审核中</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现时间">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">2020-03-02 18:20:01</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现单号">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">570238869432100500</span>
                        </template>
                    </van-cell>
                    <van-cell title="提现银行" value="招商银行"/>
                    <van-cell title="银行账户">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">570238869432100500</span>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <span style="color:#333;">服务费</span>
                        </template>
                        <template #default>
                            <span style="color:#333;">- ￥ 6.65</span>
                        </template>
                    </van-cell>
                    <van-cell title="到账金额">
                        <template #default>
                            <span style="color:#333;">￥ 59.84</span>
                        </template>
                    </van-cell>
                    <van-cell title="到账时间">
                    </van-cell>
                </van-cell-group>
            </div>
        </div> -->





    </div>
</template>
<script>
import {_ajaxwithdrawList} from '../../service/proxy'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            sc1:require("../../assets/img/coupon-draw-more.png"),
            sc2:require("../../assets/img/coupon-draw-close.png"),
            show:true,
            result:[]
        }
    },
    mounted(){
        this.getData()
    },
    filters:{
        formateDate(time){
            return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
        },
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        }
    },
    methods:{
        showitem(i){
            // this.result.foreach(item=>{
            //     item.showpage=false
            // })
            if(this.result[i].showpage){
                for(let ff=0;ff<this.result.length;ff++){
                    this.result[ff].showpage=false
                }
            }else{
                for(let ff=0;ff<this.result.length;ff++){
                    this.result[ff].showpage=false
                }
                this.result[i].showpage=true
            }
        },
        onClickLeft(){
            this.$router.push("/bankapply")
        },
        getData(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _ajaxwithdrawList({
                user_id:uid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    for(let i=0;i<res.data.length;i++){
                        res.data[i].showpage=false
                    }
                    _this.result=res.data
                    console.log(_this.result)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.cash-list-main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }

    .defaultpage{
        width: 119px;
        position: absolute;
        top: 32%;
        left: 35%;
    }

    .class-template{
        width: 345px;
        height: auto;
        margin: 10px auto;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 3px 0 20px rgba(153, 153, 153, .35);
        /deep/.van-cell{
            padding: 0;
            .font-SC();
            font-size: 12px;
            color: #999;
            line-height: 25px;
        }
        /deep/.van-cell:not(:last-child)::after{
            display: none;
        }
        /deep/.van-cell__value{
            .font-SC();
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        p{
            text-align: right;
            img{
                width: 14px;
                margin-left: 17px;
            }
            span{
                .font-SC();
                font-size: 12px;
                color: #999;
            }
        }
        .list-detail{
            width: 100%;
            border-top: 1px solid #efefef;
            /deep/.van-cell{
                padding: 0;
                .font-SC();
                font-size: 12px;
                color: #999;
                line-height: 32px;
            }
            /deep/.van-cell:not(:last-child)::after{
                display: none;
            }
            /deep/.van-cell__value{
                .font-SC();
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }
}
</style>